<template>
  <view style="width: 250px">
    <scene-container-tree
      style="width: 250px"
      :table-body-data="tableBodyData"
      :table-common-attr="tableCommonAttr"
      :tool-bar-config="toolBarConfig"
      v-bind="$attrs"
    >
    </scene-container-tree>
    <view class="icon-preview-container" :title="icon">
      <gd-icon :icon-name="icon" size="80px"></gd-icon>
      <view class="label">{{ icon }}</view>
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import collections from "./collections";
const props = defineProps({
  icon: {
    type: String,
    default: "",
  },
});
const tableCommonAttr = {
  size: "default",
  //treeTitle: "标题22",
  treeContentHeight: "400px",
  nodeKey: "id",
  parentNodeKey: "parentId",
  labelField: "name",
  treeSelectionType: "none", // ["none", "Multi", "Single"]
  lazy: false,
  appendFieldsIntoSearchForm: [],
  fillFieldsIntoAddForm: [],
  treeNodeConfig: {
    /* suffixSlotConfig: {
      componentFilePath:
        "components/gd-accbuild-ui/gd-ui/gd-icon-picker/components/customize-treeitem-suffix.vue",
      rootPathType: "gd-accbuild-core",
    }, */
  },
  searchConfig: {
    hasSearch: true,
    placeholder: "图标组搜索",
  },
  headerConfig: {
    hasHeader: true,
    title: "图标组分类",
    height: "36px",
  },
};
const toolBarConfig = {
  buttons: [
    {
      key: "buildInAddBtn",
      label: "添加一级节点22",
      isShow: false,
      onClick: () => {},
      componentAttr: {
        type: "primary",
        icon: {
          site: "suffix",
          name: "plus",
        },
      },
    },
  ],
};

const ret = [
  {
    parentId: null,
    id: "build-in",
    name: "系统图标",
    prefix: "",
    children: [],
  },
];
Object.keys(collections).forEach((k) => {
  const v = {
    parentId: null,
    id: k,
    name: k,
    children: [],
  };
  Object.keys(collections[k]).forEach((kk) => {
    const vv = {
      parentId: k,
      id: collections[k][kk].prefix,
      name: collections[k][kk].name,
      prefix: collections[k][kk].prefix,
      total: collections[k][kk].total,
      samples: collections[k][kk].samples,
      children: [],
    };
    v.children.push(vv);
  });
  ret.push(v);
});
const tableBodyData = ref(ret);
</script>
<style scoped lang="scss">
.icon-preview-container {
  height: 100px;
  width: 80%;
  text-align: center;
  .label {
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }
}
</style>
